<style type="text/css">
    #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 10px;
        font-family: "微软雅黑";
    }

    .content {
        /*height: 550px;*/
        width: 460px;
        position: absolute;
        left: 15px;
        top: 30px;
    }

    .manageTop {
        height: 40px;
        width: 100%;
        background: rgba(11, 103, 170, 0.9);
        box-sizing: content-box;
        margin-bottom: 1px;
        box-shadow: 0 0 10px rgba(0, 0, 0, .9);
    }

    .serviceName {
        height: 100%;
        width: 92%;
        font-size: 14px;
        color: #fff;
        font-weight: 700;
        line-height: 40px;
        text-align: center;
    }

    .toggleInManage {
        background-image: url(/static/img/toggle_out.png);
        background-repeat: no-repeat;
        background-size: 12px 7px;
    }

    .toggleInManage, .toggleOutManage {
        width: 40px;
        height: 40px;
        position: absolute;
        right: 4px;
        top: 1px;
        cursor: pointer;
        background-position: center;
        background-repeat: no-repeat;
    }

    .toggleOutManage {
        background-image: url(/static/img/toggle_in.png);
        background-repeat: no-repeat;
        background-size: 12px 7px;
    }

    .manageBody {
        height: 600px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 10px rgba(0, 0, 0, .9);
        margin-bottom: -1px;
    }

    .route {
        width: 100%;
        padding: 10px 10px 10px 10px;
    }

    .route ul {
        width: 100%;
        padding: 0;
    }

    .route li {
        margin-bottom: 6px;
        cursor: pointer;
        position: relative;
        zoom: 1;
        background: #fff;
        width: 100%;
        list-style: none;
    }

    .route-head {
        width: 100%;
        border: 1px solid #e4e6e7;
        padding-bottom: 12px;
    }

    .schemeName {
        padding: 5px 0 0 14px;
        font-size: 16px;
        color: #36c;
        margin: 5px 0;
        width: 100%;
    }
</style>
<style type="text/css">
    #allmap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }
</style>
#parse("/common/loading.html")
<title>运输成本</title>
<div id="allmap"></div>
<div class='content'>
    <div class="manageTop">
        <div class="serviceName">工具箱</div>
        <div class="toggleInManage" data-toggle="collapse" data-target="#manageBody"></div>
    </div>

    <div id="manageBody" class="manageBody  panel-collapse collapse in">
        <div class="nav-tabs-horizontal" data-approve="nav-tabs" id="tabs_div">
            <ul class="nav nav-tabs nav-tabs-line" role="tablist">
                <li class="active" role="presentation" data-toggle="tooltip" data-placement="bottom" title=""
                    data-original-title="运输批次">
                    <a data-toggle="tab" href="#exampleTabsLineOne" aria-controls="exampleTabsLineOne" role="tab">
                        <i class="icon wb-home margin-0" aria-hidden="true"></i>
                    </a>
                </li>
                <li role="presentation" data-toggle="tooltip" data-placement="bottom" title=""
                    data-original-title="车辆作业时间">
                    <a data-toggle="tab" href="#exampleTabsLineTwo" aria-controls="exampleTabsLineTwo" role="tab">
                        <i class="icon fa-truck margin-0" aria-hidden="true"></i>
                    </a>
                </li>
                <li role="presentation" data-toggle="tooltip" data-placement="bottom" title=""
                    data-original-title="各时段内作业车辆数量">
                    <a data-toggle="tab" href="#exampleTabsLineThree" aria-controls="exampleTabsLineThree" role="tab">
                        <i class="icon fa-line-chart margin-0" aria-hidden="true"></i>
                    </a>
                </li>
                <li role="presentation" data-toggle="tooltip" data-placement="bottom" title=""
                    data-original-title="车辆成本">
                    <a data-toggle="tab" href="#exampleTabsLineFour" aria-controls="exampleTabsLineFour" role="tab">
                        <i class="icon fa-dashboard margin-0" aria-hidden="true"></i>
                    </a>
                </li>
                <li class="dropdown hidden" role="presentation" style="opacity: 1;">
                    <a class="dropdown-toggle" ata-toggle="dropdown" href="#" aria-expanded="false">
                        <span class="caret"></span> 更多
                    </a>
                    <ul class="dropdown-menu" role="menu"></ul>
                </li>
            </ul>
            <div class="tab-content padding-top-5">
                <div class="tab-pane active" id="exampleTabsLineOne" role="tabpanel">
                    <div class="input-group iconpicker-container"
                         style="border-bottom: 1px solid #e8e8e8;padding: 5px;">
                        <span class="input-group-addon" title="象限解释"
                              data-container="body" data-toggle="popover" data-placement="right" data-trigger="hover"
                              style="cursor: pointer"
                              data-content="右侧的 Popover 中的一些内容" data-html="true"><i
                                class="icon fa-life-buoy"></i></span>
                        <select id="quadrant" class="form-control" data-plugin="selectpicker"
                                data-style="btn-outline btn-primary">
                            <option value='10'>全部</option>
                            <option value='0'>中心象限</option>
                            <option value='1'>第一象限</option>
                            <option value='2'>第二象限</option>
                            <option value='3'>第三象限</option>
                            <option value='4'>第四象限</option>
                            <option value='9'>其他</option>
                        </select>
                    </div>
                    <div id="ltx" style="width: 100%;height: 500px;"></div>
                </div>
                <div class="tab-pane" id="exampleTabsLineTwo" role="tabpanel">
                    <div class="input-group iconpicker-container"
                         style="border-bottom: 1px solid #e8e8e8;padding: 5px;">
                         <span class="input-group-addon" title="象限解释"
                               data-container="body" data-toggle="popover" data-placement="right" data-trigger="hover"
                               style="cursor: pointer"
                               data-content="右侧的 Popover 中的一些内容" data-html="true"><i
                                 class="icon fa-life-buoy"></i></span>
                        <select id="vechile" class="form-control" data-plugin="selectpicker"
                                data-style="btn-outline btn-primary">
                            <option value='0'>中心象限</option>
                            <option value='1'>第一象限</option>
                            <option value='2'>第二象限</option>
                            <option value='3'>第三象限</option>
                            <option value='4'>第四象限</option>
                            <!--<option value='9'>其他</option>-->
                        </select>
                    </div>
                    <div class="route">
                        <ul>
                        </ul>
                    </div>
                </div>
                <div class="tab-pane" id="exampleTabsLineThree" role="tabpanel">
                    <div id="time" style="height: 550px;;width: 100%"></div>
                </div>
                <div class="tab-pane" id="exampleTabsLineFour" role="tabpanel">
                    <div id="cost" style="height: 550px;;width: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    var myChart;

    //创建和初始化地图函数：
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
    }

    //创建地图函数
    function createMap() {
        var map = new BMap.Map("allmap");//在百度地图容器中创建一个地图
        var point = new BMap.Point(121.446235, 31.169152);//定义一个中心点坐标
//        map.centerAndZoom(point, 11);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
        map.setMapStyle({
            styleJson: [
                {
                    "featureType": "highway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "subway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "railway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "local",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }
            ]
        });
//        var marker = new BMap.Marker(point);  // 创建标注
//        var marker = new BMap.Marker(new BMap.Point(121.4692106567,31.1789341757));  // 创建标注
//        map.addOverlay(marker);               // 将标注添加到地图中
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    function createHeatMap() {
        if (!isSupportCanvas()) {
            alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
        }

        //判断浏览区是否支持canvas
        function isSupportCanvas() {
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        }
    }

    function createMaker(lng, lat, title) {
        var icon = new BMap.Icon('http://api0.map.bdimg.com/images/blank.gif', new BMap.Size(30, 30));
        var marker = new BMap.Marker(new BMap.Point(lng, lat), {icon: icon});  // 创建标注点
        var label = new BMap.Label(title, {offset: new BMap.Size(20, -10)});
        label.setStyle({
            color: "red",
            fontSize: "14px",
            height: "20px",
            lineHeight: "20px",
            fontFamily: "微软雅黑",
            display: "none"  //给label设置样式，任意的CSS都是可以的
        });
        marker.setLabel(label);

        marker.addEventListener("mouseover", function () {
            label.setStyle({    //给label设置样式，任意的CSS都是可以的
                display: "block"
            });

        });
        marker.addEventListener("mouseout", function () {
            label.setStyle({    //给label设置样式，任意的CSS都是可以的
                display: "none"
            });
        });
        map.addOverlay(marker);
    }

    function createPoint(lng, lat, content) {
        var point = new BMap.Point(lng, lat);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        var opts = {
            width: 100,     // 信息窗口宽度
            height: 20,     // 信息窗口高度
            title: content // 信息窗口标题
        };
        var infoWindow = new BMap.InfoWindow("", opts);  // 创建信息窗口对象
        marker.addEventListener("click", function () {
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        });
        return point;
    }

    function createBar() {
        var option = {
            backgroundColor: 'rgba(0,0,0,0)',
            title: {
                text: '',
                subtext: '',
                show: false
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '20',
                right: '5',
                top: '5',
                bottom: '5',
                containLabel: true
            },
            xAxis: {
                show: false,
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: []
            },
            series: [
                {
                    name: '订单量',
                    type: 'bar',
                    maxWidth: 30,
                    data: []
                }
            ]
        };
        myChart = echarts.init(document.getElementById('ltx'), 'macarons');
        myChart.setOption(option);
        $('#manageBody').on('show.bs.collapse', function () {
            $("div[data-target='#manageBody']").removeClass().addClass("toggleInManage");
        }).on('hide.bs.collapse', function () {
            $("div[data-target='#manageBody']").removeClass().addClass("toggleOutManage");
        });
    }

    jQuery(document).ready(function () {
        jQuery("#allmap").css("height", window.innerHeight - 105);
        initMap();//创建和初始化地图
        createHeatMap();//初始化热力图
        createBar();//初始化bar图
        $("#quadrant").change(function () {
            document.getElementById("loading").style.display="";
            $.ajax({
                url: "#springUrl('/city/quadrant')",
                data: {type: $(this).val()},
                type: "POST",
                success: function (text) {
                    var d = JSON.parse(text);
                    if (d.success && d.data) {
                        var dataX = [];
                        var dataS = [];
                        var pointData = [];
                        for (var i = 0; i < d.data.length; i++) {
                            dataX.push(d.data[i].nodeName);
                            dataS.push(d.data[i].amount);
                            pointData.push({
                                nodeName: d.data[i].nodeName,
                                lng: d.data[i].coordinateX,
                                lat: d.data[i].coordinateY,
                                count: d.data[i].amount
                            });
                        }
                        myChart.setOption({
                            yAxis: {
                                type: 'category',
                                data: dataX,
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        fontWeight: 'bold',
                                        fontSize: 14,
                                        fontFamily: '微软雅黑'
                                    }
                                }
                            },
                            series: [{
                                name: '订单量',
                                data: dataS
                            }]
                        });
                        map.centerAndZoom(new BMap.Point(pointData[0].lng, pointData[0].lat), 11);
                        map.clearOverlays();
                        var heatmapOverlay = new BMapLib.HeatmapOverlay({"radius": 25});
                        map.addOverlay(heatmapOverlay);
                        heatmapOverlay.setDataSet({data: pointData, max: 100});
                        for (var i = 0; i < pointData.length; i++) {
                            createMaker(pointData[i].lng, pointData[i].lat, pointData[i].nodeName + "（订单量）：" + pointData[i].count);
                        }
                        document.getElementById("loading").style.display="none";
                    }
                }
            });
        });
        $("#vechile").change(function () {
            document.getElementById("loading").style.display="";
            $.ajax({
                url: "#springUrl('/city/vechile')",
                data: {batchId: 59, type: $(this).val()},
                type: "POST",
                success: function (text) {
                    var d = JSON.parse(text);
                    if (d.success && d.data) {
                        $(".route ul").html("");
                        $.each(d.data, function (index, batch) {
                            var customs = batch.customs;
                            var html = '<div class="schemeName">[批次' + (index + 1) + ']&nbsp;';
                            for (var i = 0; i < customs.length; i++) {
                                html += '&nbsp;' + customs[i].name + '&nbsp;';
                                if (i < customs.length - 1) {
                                    html += '<span class="rarr">→</span>';
                                }
                            }
                            html += "</div>";
                            var li = $("<li>");
                            var head = $("<div class='route-head'>");
                            head.append(html);
                            var time = '';
                            if (batch.duration / 3600 > 1) {
                                time += Math.floor(batch.duration / 3600) + "小时"
                            }
                            time += Math.floor((batch.duration % 3600) / 60) + "分钟";
                            head.append('&nbsp;&nbsp;&nbsp;&nbsp;<span class="bus_time">' + time + '</span>');
                            head.append('<span class="busitemdelimiter">|</span>');
                            head.append('<span>' + batch.distance + '公里</span>');
                            head.append('<span class="busitemdelimiter">|</span>');
                            head.append('<span>' + batch.vehicle + '辆车</span>');
                            head.append('<span class="busitemdelimiter">|</span>');
                            head.append('<span>' + batch.amount + '个料架</span>');
                            li.append(head);
                            li.click(function () {
                                map.clearOverlays();
                                var endIndex = customs.length - 1;
                                var start = createPoint(batch.distribute.lng, batch.distribute.lat, batch.distribute.name);
                                var end = createPoint(customs[endIndex].lng, customs[endIndex].lat, customs[endIndex].name);
                                var waypoints = [];
                                var landmarkPois = [];
                                if (customs.length > 1) {
                                    for (var i = 0; i < customs.length - 1; i++) {
                                        waypoints.push(createPoint(customs[i].lng, customs[i].lat, customs[i].name));
                                        landmarkPois.push({
                                            lng: customs[i].lng,
                                            lat: customs[i].lat,
                                            html: customs[i].name,
                                            pauseTime: 2
                                        })
                                    }
                                }
                                // 实例化一个驾车导航用来生成路线
                                var drv = new BMap.DrivingRoute(map, {
                                    onSearchComplete: function (res) {
                                        if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
                                            var plan = res.getPlan(0);
                                            var arrPois = [];
                                            for (var j = 0; j < plan.getNumRoutes(); j++) {
                                                var route = plan.getRoute(j);
                                                arrPois = arrPois.concat(route.getPath());
                                            }
                                            map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#11060b'}));
                                            map.setViewport(arrPois);
                                            var lushu = new BMapLib.LuShu(map, arrPois, {
                                                defaultContent: "",
                                                autoView: true,//是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
                                                icon: new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52, 26), {anchor: new BMap.Size(27, 13)}),
                                                speed: 7500,
                                                enableRotation: true,//是否设置marker随着道路的走向进行旋转
                                                landmarkPois: landmarkPois
                                            });
                                            var point = new BMap.Point(batch.distribute.lng, batch.distribute.lat);//定义一个中心点坐标
                                            map.centerAndZoom(point, 11);//设定地图的中心点和坐标并将地图显示在地图容器中
//                                            lushu.start();
                                        }
                                    }
                                });
                                drv.search(start, end, {waypoints: waypoints});
                            });
                            $(".route ul").append(li);
                        });
                        $(".route ul").find("li:first").trigger("click");
                        document.getElementById("loading").style.display="none";
                    }
                }
            });
        });
        var li = $('#tabs_div li[role="presentation"]');
        $(li[3]).one("click", function () {
            document.getElementById("loading").style.display="";
            $.ajax({
                url: "#springUrl('/city/vehicleCost')",
                data: {batchId: 59},
                type: "POST",
                success: function (text) {
                    var d = JSON.parse(text);
                    if (d.success && d.data) {
                        var total = 0;
                        for (var i = 0; i < d.data.length; i++) {
                            total += parseFloat(d.data[i])
                        }
                        var costChart = echarts.init(document.getElementById('cost'), 'macarons');
                        costChart.setOption({
                            title: {
                                text: '一天内所有车辆总油耗：' + total.toFixed(2) + '元'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    mark: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: ['中心象限', '第一象限', '第二象限', '第三象限', '第四象限', '其他象限'],//设置字体倾斜
                                    axisLabel: {
                                        interval: 0,
                                        rotate: 15,//倾斜度 -90 至 90 默认为0
                                        top: 10
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    boundaryGap: [0, 0.1]
                                }
                            ],
                            series: [
                                {
                                    name: '车辆油耗',
                                    type: 'bar',
                                    barCategoryGap: '50%',
                                    itemStyle: {
                                        normal: {
                                            color: 'tomato',
                                            barBorderColor: 'tomato',
                                            barBorderWidth: 6,
                                            barBorderRadius: 0
                                        }
                                    },
                                    label: {
                                        normal: {
                                            color: 'black',
                                            show: true,
                                            position: 'insideTop'
                                        }
                                    },
                                    data: d.data
                                }
                            ]
                        });
                        document.getElementById("loading").style.display="none";
                    }
                }
            });
        });
        $(li[2]).one("click", function () {
            document.getElementById("loading").style.display="";
            $.ajax({
                url: "#springUrl('/city/vehicleTime')",
                data: {batchId: 59},
                type: "POST",
                success: function (text) {
                    var d = JSON.parse(text);
                    if (d.success && d.data) {
                        var timeChart = echarts.init(document.getElementById('time'), 'macarons');
                        timeChart.setOption({
                            title: {
                                text: '所需车辆总数：' + d.data.data[0] + '辆',
                                show: true
                            },
                            tooltip: {
                                trigger: 'axis',
                                formatter: function (params) {
                                    return "第" + params[0].name + "个小时<br/> 作业车辆：" + params[0].value;
                                },
                                axisPointer: {
                                    animation: false
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: d.data.name
                            },
                            yAxis: {
                                type: 'value',
                                boundaryGap: [0, '100%'],
                                splitLine: {
                                    show: false
                                }, max: 30
                            },
                            series: [{
                                name: '作业车辆',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: d.data.data
                            }]
                        });
                        document.getElementById("loading").style.display="none";
                    }
                }
            });
        });
        $(li[1]).one("click", function () {
            $("#vechile").trigger("change");
        });

        $("#quadrant").trigger("change");
        $(".input-group-addon").attr("data-content", "利用中心法选出重心作为中心原点,以重心为原点在平面地图画出水平和垂直坐标轴，约定西北方向为第一象限，顺时针方向递推依次为第二第三第四象限。")
    });
</script>

